import React, { useCallback } from 'react'
import { Pagination } from 'antd'
import styles from './index.less'

const Footer = ({ setting, customTotal, customPagination=true }) => {
  const { current, pageSize, onPaginationChange } = setting

  const onShowSizeChange = useCallback(
    (current, pageSize) => {
      // 改变后需要重新获取第current页的数据
      onPaginationChange(current, pageSize)
    },
    [onPaginationChange]
  )

  return (
    <div className={styles.footerContainer}>
      <div className={styles.total}>{customTotal ? customTotal : `共${setting?.total || 0}条`}</div>
      {customPagination && (
        <Pagination
          className={styles.page}
          showSizeChanger
          onShowSizeChange={onShowSizeChange}
          pageSizeOptions={['10', '30', '50', '100']}
          showQuickJumper={setting?.total > pageSize}
          current={current}
          pageSize={pageSize}
          total={setting?.total}
          onChange={onShowSizeChange}
        />
      )}
    </div>
  )
}

export default Footer
